<template>
    <div>
        <div class="cz_container" style="margin-top: 15px">
            <div class="form_box">
                <div class="mui-input-row">
                    <input name="recipients" type="text" placeholder="收货人" v-model="per">
                </div>
                <div class="mui-input-row">
                    <input name="postCode" type="text" placeholder="邮编" v-model="port">
                </div>
                <div class="mui-input-row">
                    <input name="address" type="text"  placeholder="省市" @focus="showPicker" @blur="removePicker" v-model="address_pro">
                </div>
                <div class="mui-input-row">
                    <textarea name="addressDetail" id="textarea" rows="5" placeholder="详细地址" v-model="detail_address"></textarea>
                </div>
                <a href="javascript:;" class="mui-btn mui-btn-primary btn_submit" @click="editAddress">确认</a>
            </div>
        </div>
        <div class="picker">
            <mt-picker :slots="slots" @change="onValuesChange" v-show="flag"></mt-picker>
        </div>
    </div>

</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        methods: {
            onValuesChange(picker, values) {
                if(this.flag){
                    this.address_pro = values[0]+values[1];
                }else{
                    this.address_pro = ''
                }
            },
            showPicker(){
                this.flag = !this.flag;
            },
            removePicker(){
                this.flag = false;
            },
            editAddress(){
                var option = {
                    id:this.id,
                    address:this.address_pro + this.detail_address,
                    port:this.port,
                    per:this.per,
                }
                this.$http.post('http://127.0.0.1:3002/editAddress',option,{emulateJSON:true}).then((result)=>{
                    if(result.body.status ===0){
                        Toast(result.body.message);
                        this.$router.push('/user/address/'+this.user_id);
                    }else{
                        Toast('你的网络抽风了');
                    }
                });
            }
        },
        data() {
            return {
                flag:false,
                slots: [
                    {
                        flex: 1,
                        values: ['江苏'],
                        className: 'slot1',
                        textAlign: 'center'
                    }, {
                        divider: true,
                        content: '-',
                        className: 'slot2'
                    }, {
                        flex: 1,
                        values: ["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"],
                        className: 'slot3',
                        textAlign: 'center'
                    },
                ],
                address_pro:'',
                per:'',
                port:'',
                detail_address:'',
                id:this.$route.params.id,
                user_id:this.$route.params.user_id,
            };
        }
    };
</script>

<style scoped lang="css">
    .picker{
        background-color: #fff;
        margin-top: 17px;
    }
</style>